<template>
  <div class="assetsdetailed">
    <section class="detailed">
      <ul class="detailedheader">
        <li class="list">
          <h2>{{$t('tobuy.alse[0]')}} </h2>
        </li>
        <li class="list">
          <!-- <h2>币种选择</h2> -->
        </li>
      </ul>
      <section class="detailedmian">
        <!-- <fabi-order  @func="order" ></fabi-order> -->
        <section class="Order">
          <el-tabs type="border-card" v-model="type" @tab-click="typehide">
            <el-tab-pane :label="$t('tobuy.alse[1]')" name="1">
              <el-table :data="requestData1.data" style="width: 100%">
              <el-table-column prop="order_no" :label="$t('tosell.list[2]')" align="center" width="220px"></el-table-column>
              <el-table-column prop="trans_num" :label="$t('tosell.list[3]')" align="left"></el-table-column>
              <el-table-column prop="surplus_num" :label="$t('tosell.list[4]')" align="left"></el-table-column>
              <el-table-column prop="total_price" :label="$t('tosell.list[5]')" align="left"></el-table-column>
              <el-table-column prop="price" :label="$t('tosell.list[6]')"  align="left"></el-table-column>
              <el-table-column prop="created_at" :label="$t('tosell.list[7]')"  align="left"></el-table-column>
              <el-table-column prop="name" :label="$t('tosell.list[8]')" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" v-if="scope.row.status==1" @click="cancelOrder(scope.row.order_no, '1')">{{$t('tosell.list[9]')}}</el-button>
                  <el-button type="text" size="small" v-if="scope.row.status==2">{{$t('tosell.list[10]')}}</el-button>
                  <el-button type="text" size="small" v-if="scope.row.status==3">{{$t('tosell.list[11]')}}</el-button>
                </template>
              </el-table-column>
            </el-table>
               <PagesSize  :content="requestData1" @func="getMsgFormSon"></PagesSize>
            </el-tab-pane>
            <el-tab-pane :label="$t('tobuy.alse[2]')" name="2">
                <el-table :data="requestData2.data" style="width: 100%">
                  <el-table-column prop="order_no" :label="$t('tosell.list[2]')"  align="center" width="220px"></el-table-column>
                  <el-table-column prop="trans_num" :label="$t('tosell.list[3]')"  align="left"></el-table-column>
                  <el-table-column prop="surplus_num" :label="$t('tosell.list[4]')"  align="left"></el-table-column>
                  <el-table-column prop="total_price" :label="$t('tosell.list[5]')"  align="left"></el-table-column>
                  <el-table-column prop="price" :label="$t('tosell.list[6]')"  align="left"></el-table-column>
                  <el-table-column prop="created_at" :label="$t('tosell.list[7]')"  align="left"></el-table-column>
                  <el-table-column prop="name" :label="$t('tosell.list[8]')"  align="center">
                    <template slot-scope="scope">
                      <el-button type="primary" size="small" v-if="scope.row.status==1" @click="cancelOrder(scope.row.order_no, '2')">{{$t('tosell.list[9]')}}</el-button>
                      <el-button type="text" size="small" v-if="scope.row.status==2">{{$t('tosell.list[10]')}}</el-button>
                      <el-button type="text" size="small" v-if="scope.row.status==3">{{$t('tosell.list[11]')}}</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <PagesSize  :content="requestData2" @func="getMsgFormSon"></PagesSize>
            </el-tab-pane>
          </el-tabs>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
  import { assetInfo } from '@/api/user';
  import { issueorderlist,  revokeorder} from "@/api/fbTrade";
  import { getToken } from "@/libs/util";
  import PagesSize from "_dom/paging";
  export default {
    name: 'fabiorder',
    data() {
      return {
        type: '1',
        timer: null,
        requestData1: [],
        requestData2: [],
        changedata:{
            page: "1",
            wid: "1"
        },
      }
    },
    methods: {
      getList1(){
        issueorderlist({order_type: '1'}).then((res) => {
             
              this.requestData1 = res
             
        });
      },
      getList2(){
        issueorderlist({order_type: '2'}).then((res) => {
             
              this.requestData2 = res
             
        });
      },
      getMsgFormSon(datavue){ //分页
          this.changedata.page = datavue.page;
          this.typget();
      },
      typehide(row){ //切换
          this.type = row.name;
          this.changedata = {
              page: "1",
              wid:"1"
          };
          this.typget();
      },
      typget(){
        switch (this.type) {
            case '1':
                this.getList1();
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = setInterval(()=> {
                    this.getList1();
                }, 3000)
                break;
            case '2':
                this.getList2();
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = setInterval(()=> {
                    this.getList2();
                }, 3000)
                break;
            default:
                break;
        }
      },
      cancelOrder(id, type){
        revokeorder({order_no: id, order_type: type}).then((res) => {
            
              this.$message.success("操作成功");
              this.typget()
             
        });
      }
    },
    beforeDestroy(){
        clearInterval(this.timer);
        this.timer = null;
    },
    created() {
      this.getList1();
      if(getToken('token')){
          this.timer = setInterval(()=> {
              this.getList1();
          }, 3000)
      };
    },
    components: {
        PagesSize
    }
  }
</script>
<style lang="less">
  .assetsdetailed{
    min-height: 70vh;
  }
  .pagination{
    background: #0a1017 !important;
    margin: 0;
    padding: 20px 0;
  }
</style>
